<template>
    <div id="index">
        <div class="index_main">
            <div class="carousel">
                <el-carousel height="500px" :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in pic" :key="item.img">
                        <img :src="item" class="carousel_img">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="pro_introduce">
                <h3>
                    <img src="../assets/pro.png" class="tle_img">
                    <span>企业产品</span>
                    <span class="more">
                        <router-link to="/product">更多</router-link>
                        <img src="../assets/more.png">
                    </span>
                </h3>
                <div class="pro_introduce_box">
                    <div class="pro_introduce_item" v-for="img in pros" :key="img.pro">
                        <router-link :to="{ name: 'prodetail', params: { id: img.id,cid:img.cid}}" style="display:block;width:100%;height:100%">
                            <div class="pro_box">
                                <div class="pro_img">
                                    <img :src="img.logo" style="width:100%;height:200px">
                                </div>
                                <div class="pro_txt">
                                    <p class="pro_tle">{{img.title}}</p>
                                    <p class="consult">{{img.summary}}</p>
                                </div>
                            </div>
                        </router-link>

                    </div>
                </div>
            </div>

            <div class="video">
                <h3>
                    <img src="../assets/video_logo.png" class="tle_img">
                    <span>视频信息</span>
                    <span class="more">
                        <router-link to="/video">更多</router-link>
                        <img src="../assets/more.png">
                    </span>
                </h3>
                <el-row :gutter="20">
                    <el-col :span="8" class="video_box" v-for="video_list in video" :key="video_list.videos">

                        <div class="grid-content bg-purple-light list_cont">
                            <div class="video_cover">
                                <router-link :to="{name:'video_detail',params: {id:video_list.id}}">
                                    <img :src="video_list.cover">
                                    <div class="covers">
                                        <img src="../assets/videos.png" class="icon_video">
                                    </div>
                                    <div class="desc">
                                        <p class="desc_title">{{video_list.title}}</p>
                                        <!-- <p class="desc_summary">{{video_list.summary}}</p> -->

                                    </div>
                                </router-link>
                            </div>

                        </div>

                    </el-col>
                </el-row>
            </div>


            <div class="news">
                <h3>
                    <img src="../assets/news.png" class="tle_img">
                    <span>新闻资讯</span>
                    <span class="more">
                        <router-link to="/news">更多</router-link>
                        <img src="../assets/more.png">
                    </span>
                </h3>

                <el-row>
                    <el-col :span="12" v-for="txt in news" :key="txt.new" class="news_item_box">

                        <div class="grid-content bg-purple-light news_item">
                            <!-- <router-link to="/news_artical/7"> -->
                            <router-link :to="{ name: 'news_artical', params: { id: txt.id,cover:txt.title}}">
                                <!-- <router-link :to="{path:'news_artical',query: {id:txt.id}}"> -->
                                <div class="news_img">
                                    <img :src="txt.cover[0]">
                                </div>
                                <div class="news_txt">
                                    <p class="news_tle">{{txt.title}}</p>
                                    <p class="news_body">{{txt.abstract}}</p>
                                </div>
                            </router-link>
                        </div>

                    </el-col>
                </el-row>

            </div>

            
        </div>
    </div>
</template>

<script scoped>
export default {
    data() {
        return {
            pic: [],
            news: [],
            pros: [],
            video: [],
            api:[],
            com_id:localStorage.getItem("companyid"),
            com:[],
            compamy_name:[],
            init_val:'1'
        };
    },
    mounted() {
       console.log('mouted') 
        var domain=window.location.href;
        var sec=domain.split(".")[0];
        var secs=sec.replace(/\//g, "");
        var api=secs.replace(/http:/, "");
        this.api=api;       
    },
    methods: {
        loadApi(){
            //var api="test2"
            this.$http.post('http://thy.588net.com/index.php/api/domain/get_domain',{pr:this.api},{emulateJSON: true}).then(function(res){
                 var com_ids=res.body.data.company_id;
                 this.com=com_ids; 
                //console.log(res.body.code)
                if(res.body.data.company_id || res.body.code==200){                               
                    var com_id=localStorage.setItem('companyid',com_ids);
                    this.loadpic();
                     this.loadnews();
                    this.loadPro();
                    this.loadVideo();                  
                }
                if(res.body.code==1002 || res.body.data==''){ 
                    var com_id=localStorage.setItem('companyid',this.init_val); 
                    this.loadpic();
                     this.loadnews();
                    this.loadPro();
                    this.loadVideo();                
                }  
            })
        },
        loadpic() {             
                var com_id=localStorage.getItem("companyid");               
                this.$http.get('http://thy.588net.com/index.php/api/Company/get_company_index?' + '&company_id=' + com_id).then(function(res) {
                this.pic = res.body.data.company.banner;
                this.company_name=res.body.data.company.name;
                console.log(this.company_name);
                document.title="首页-"+this.company_name
            })      
            
        },
        loadnews() {
            var com_id=localStorage.getItem("companyid");
            window.scrollTo(0, 0);
             this.$http.get('http://thy.588net.com/index.php/article/Article/get_list?' + 'company_id=' + com_id + '&page_size=' + 6 + '&page=' + 1  + '&is_web=' + 1).then(function(res) {
                this.news = res.body.data.data;
            })
        },
        loadPro() {
            var com_id=localStorage.getItem("companyid");
            this.$http.get('http://thy.588net.com/index.php/mall/product/get_sub_list?' + '&company_id=' + com_id + '&page_size=' + 5 + '&page=' + 1).then(function(res) {
                this.pros = res.body.data;
            })
        },
        loadVideo() {
            var com_id=localStorage.getItem("companyid");
            this.$http.get('http://thy.588net.com/index.php/article/video/get_video_list?' + '&page&=' + 1 + '&page_size=' + 3 + '&company_id=' + com_id).then(function(res) {
                this.video = res.body.data;
            })
        }
    },
    activated:function(){
        this.loadApi();
        $(".is-active").removeClass("is-active");
    },

}
</script>
<style scoped>
.tle_img{
    vertical-align: bottom;
    width: 22px;
    height: 22px;
    margin-bottom: 4px;
}
.more a{display: inline-block}
.more img{vertical-align: middle;width: 26px;height: 26px;float: right;margin-top: 2px}
a {
    text-decoration: none;
    color: #5a5a5a
}

.news,.pro_introduce,.video,.carousel{
        box-shadow: 0px 0px 6px 0px #d8d8d8;
}
.el-carousel__indicator.is-active button {

    background: #2277ff;
    opacity: 1;
}

.consult {
    font-size: 14px;
    color: #a5a5a5;
    margin: 10px 0;
     height: 40px;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-wrap: break-word
}

.el-row {
    /* margin-bottom: 20px; */
    &:last-child {
        margin-bottom: 0;
    }
}

.desc {
    /* padding: 0 10px; */
    overflow: hidden
}

.pro_tle {
    font-size: 14px;
     height: 40px;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.desc_title {
    width: 100%;
    height: 50px;
    line-height: 25px;
    font-size: 18px;
    color: #5a5a5a;
   display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
    margin: 10px 0;
}

.video_cover {
    width: 100%;
    position: relative;
}

.video {
    clear: both;
    overflow: hidden;
    background: #fff;
    padding: 0 20px;
    margin-top: 20px;
    margin-bottom: 3px
}


.video_box {
    /* padding: 0 20px!important */
}

.list_cont {
    /* border: 1px solid #d8d8d8;
    border-radius: 8px; */
    /* overflow: hidden; */
    padding-bottom: 10px;
}

.desc_summary {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    padding-bottom: 14px;
    line-height: 40px;
    height: 40px;
    width: 100%;
    color: #7d7c7c;
    -webkit-line-clamp: 3;
}

.icon_video {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    width: 80px;
    height: 80px;
    color: rgba(255, 255, 255, .5);
    -webkit-animation: play 2s linear 0s infinite alternate;
    animation: play 2s linear 0s infinite alternate;
}

.el-icon-d-arrow-right {
    margin-left: 5px
}

@-webkit-keyframes play {
    0% {
        -webkit-transform: scale(1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes play {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.08);
        opacity: 1;
    }
}

.video_cover>a>img {
    display: block;
    width: 100%;
    height: 250px;
}

.covers {
    box-shadow: 0 0 8px 1px #f1f1f1;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 250px;
    /* background-color: rgba(0, 0, 0, .5); */
    cursor: pointer;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.el-carousel__container {
    position: relative;
    height: 600px!important;
}

.index_main {
    max-width: 1200px;
    margin: 0 auto;
}

.pro_introduce {
    /* width: 100%; */
    padding: 0 20px;
    padding-bottom: 10px;
    background: #fff;
}

.pro_introduce>h3,
.video h3,
.news>h3 {
    padding: 20px 0;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    color: #333;
    font-weight: normal;
    overflow: hidden;
}

.more {
    float: right;
    font-size: 16px;
    color: #a5a5a5
}

.pro_introduce_box {
    overflow: hidden;
}

.pro_introduce_item {
    float: left;
    width: 18%;
    margin-right: 2.5%;
    height: auto;
}

.pro_introduce_item:nth-of-type(5n) {
    margin-right: 0;
}

.news {
    /* width: 100%; */
    margin-top: 20px;
    padding: 0 20px;
    background: #fff;
    overflow: hidden;
}

.news_item_box {
    padding-right: 30px;
}

.news .news_item {
    overflow: hidden;
    height: 150px;
    margin-bottom: 20px;

    cursor: pointer;
    /* box-sizing: content-box; */
}

.news_item_box:nth-of-type(even) {
    padding-right: 0
}

.news .news_item .news_img {
    float: left;
    margin-right: 20px;
    overflow: hidden;
}

.news .news_item .news_img img {
    vertical-align: bottom;
    height: 150px;
    width: 250px;
    transition: all ease .8s;
}

.news .news_item .news_img img:hover {
    transform: scale(1.1)
}

.news .news_txt {
    /* display: flex;
    flex-direction: column; */
    height: 150px;
    /* padding: 10px 0; */
}

.news .news_txt p {
    margin: 0;
}

.news .news_txt .news_tle {
    font-size: 18px;
    color: #5a5a5a;
    height: 40px;
    /* line-height: 40px; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.news_txt .news_body {
    height: 110px!important;
    font-size: 14px;
    color: #5A5A5A;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-height: 27px;
    overflow: hidden;
}

.carousel {
    margin-bottom: 20px
}

.carousel_img {
    width: 100%;
        min-height: 500px;
}
</style>

